<template>
  <div>
    <el-form-item>
      <el-button type="primary"  @click="addRole">添加角色</el-button>
    </el-form-item>
    <div class="table-box">
      <el-table :data="data.list" border style="width: 100%" max-height="250">
        <el-table-column prop="roleId" label="ID" width="120" />
        <el-table-column prop="roleName" label="角色名" width="120" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button
              link
              type="primary"
              size="small"
              @click="changePower(scope.row)"
            >
              修改权限
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getRoleList } from "../../../request/api";
import { onMounted, reactive } from "vue";
import { roleList,roleListIlk } from "../../../type/roleView";
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from "element-plus";

/** 开启路由 */
const router = useRouter();
const data = reactive(new roleList());
onMounted(() => {
  getRole();
});
/** 获取数据 */
const getRole = () => {
  getRoleList().then((res) => {
    data.list = res.data;
    console.log(data.list);
  });
};
/** 点击添加角色 */
const addRole = () => {
  ElMessageBox.prompt("请输入你要添加的角色", "添加", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    inputPattern:
    /^.+$/,
    inputErrorMessage: "请输入需要添加的角色",
  })
    .then(({ value }) => {
      if (value) {
        ElMessage({
          type: "success",
          message: `添加的角色为:${value}`,
        });
        /** 添加角色 */
        data.list.push({
            roleId: data.list.length + 1,
            roleName: value,
            authority: [],
        });
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消",
      });
    });
};
/** 点击修改权限 */
const changePower = (row:roleListIlk) => {
  router.push({
  name: "authority",
  params: {
    id: row.roleId,
    authority: row.authority,
  }
});
};
</script>

<style scoped>
</style> 